<template>
  <el-dialog
    :title="dataForm.id!==''?'应用修改':'应用新增'"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="rules"
    >
      <el-form-item prop="appName" label="应用名称">
        <el-input v-model="dataForm.appName" clearable></el-input>
      </el-form-item>

      <el-form-item prop="redirectUrl" label="路径">
        <el-input v-model="dataForm.redirectUrl" clearable></el-input>
      </el-form-item>

      <el-form-item prop="status" label="应用状态">
        <el-radio-group v-model="dataForm.status" clearable>
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">下线</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('dataForm')">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {appAddOrUpdate} from '@/api/app'

export default {
  name: "AppAddOrUpdateModal",
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        appName: '',
        id: '',
        redirectUrl: '',
        status: 0
      },
      rules: {
        appName: [
          {required: true, message: '应用名称不能为空', trigger: 'change'}
        ],
        redirectUrl: [
          {required: true, message: '路径不能为空', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    init(row) {
      this.dialogVisible = true
      if (row) {
        this.dataForm = row;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          appAddOrUpdate({
            appName: this.dataForm.appName,
            id: this.dataForm.id !== '' ? this.dataForm.id : '',
            redirectUrl: this.dataForm.redirectUrl,
            status: this.dataForm.status
          }).then(() => {
            this.handleClose()
            this.$parent.init()
            this.$message.success('操作成功')
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false;
      this.$nextTick(() => {
        this.$parent.AppAddOrUpdateModalVisible = false
      })
    }
  }
}
</script>

<style scoped>

</style>
